<template>
  <div>
    <div class="main">
      <el-row>
        <!-- 酒店搜索面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>酒店</el-breadcrumb-item>
          <el-breadcrumb-item>{{ cityName }}酒店预订</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>

      <!-- 酒店搜索模块 -->
      <el-row>
        <hotelInputCom @sendScenics="sendScenics" @sendData="sendData" />
      </el-row>

      <!-- 区域、价格、地图 -->
      <el-row type="flex" class="address">
        <el-col :span="14" class>
          <!-- 区域 -->
          <!-- 页面进来定位区域结构 -->
          <el-row type="flex" class="allAddress" v-if="isArr">
            <el-col :span="3">区域:</el-col>
            <el-col :span="21" class="addressSpan">
              <span v-for="(val, index) in forScenicsList" :key="index">{{
                val.name
              }}</span>
              <nuxt-link
                to="#"
                @click.native="showArrScenics"
                v-if="forScenicsList.length > 0"
              >
                <i class="el-icon-d-arrow-right" :class="{ showI: isTrue }"></i>
                等{{ arrScenics.length }}个区域
              </nuxt-link>
              <nuxt-link to="#" v-else>
                <i class="el-icon-d-arrow-right"></i>等0个区域
              </nuxt-link>
            </el-col>
          </el-row>

          <!-- 搜索城市区域结构 -->
          <el-row type="flex" class="allAddress" v-else>
            <el-col :span="3">区域:</el-col>
            <el-col :span="21" class="addressSpan">
              <span v-for="(val, index) in forScenicsList" :key="index">{{
                val.name
              }}</span>
              <nuxt-link
                to="#"
                @click.native="showScenics"
                v-if="forScenicsList.length > 0"
              >
                <i class="el-icon-d-arrow-right" :class="{ showI: isTrue }"></i>
                等{{ allScenicsList.length }}个区域
              </nuxt-link>
              <nuxt-link to="#" v-else>
                <i class="el-icon-d-arrow-right"></i>等0个区域
              </nuxt-link>
            </el-col>
          </el-row>

          <!-- 均价 -->
          <el-row type="flex" class="price">
            <el-tooltip
              class="item"
              effect="dark"
              content="等级均价由平日价格计算得出，节假日价格会有上浮。"
              placement="top-start"
            >
              <div class="priceQuestion">?</div>
            </el-tooltip>
            <el-col :span="3">均价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</el-col>
            <el-col :span="21">
              <el-row type="flex">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                  placement="top-start"
                  :visible-arrow="false"
                >
                  <div>
                    <i
                      class="iconfont iconhuangguan"
                      v-for="(val, index) in 3"
                      :key="index"
                    ></i>
                    ￥332
                  </div>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                  placement="top-start"
                  :visible-arrow="false"
                >
                  <div>
                    <i
                      class="iconfont iconhuangguan"
                      v-for="(val, index) in 4"
                      :key="index"
                    ></i>
                    ￥521
                  </div>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                  placement="top-start"
                  :visible-arrow="false"
                >
                  <div>
                    <i
                      class="iconfont iconhuangguan"
                      v-for="(val, index) in 5"
                      :key="index"
                    ></i>
                    <i class="iconfont iconhuangguan"></i>
                    ￥768
                  </div>
                </el-tooltip>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <div id="container"></div>
        </el-col>
      </el-row>
    </div>
    <div class="container">
      <!-- 酒店搜索列表 -->
      <div class="list-filter">
        <el-row type="flex" style="margin-left:-20px;margin-right:-20px;">
          <!-- 滑动条 -->
          <el-col
            :span="6"
            style="padding-left:20px;padding-right:20px;"
            class="filter-col"
          >
            <el-row class="filter-title" type="flex">
              <el-col :span="24">价格</el-col>
              <el-col class="ta-r" :span="24">0-{{ price_Filter }}</el-col>
            </el-row>
            <el-row>
              <div class="block">
                <el-slider
                  v-model="value"
                  :min="0"
                  :max="2000"
                  @change="sliderChangePrice"
                ></el-slider>
              </div>
            </el-row>
          </el-col>

          <!-- 星级 -->
          <el-col
            :span="5"
            style="padding-left:20px;padding-right:20px;"
            class="filter-col"
          >
            <el-row class="filter-title">
              <el-col :span="24">住宿等级</el-col>
            </el-row>
            <el-row class="filter-wrapper">
              <el-dropdown class="filter-dropdown">
                <span class="el-dropdown-link">
                  <span
                    class="dropdown-link-text"
                    v-if="!model.hotelLevel.length"
                    >不限</span
                  >
                  <span
                    class="dropdown-link-text"
                    v-else-if="model.hotelLevel.length == 1"
                  >
                    {{ model.hotelLevel[0] }}星
                  </span>
                  <span class="dropdown-link-text" v-else>
                    已选{{ model.hotelLevel.length }}项
                  </span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in options.levels"
                    :key="index"
                    @click.native="handleHotelLevel(item.level)"
                  >
                    <i
                      class="iconfont iconcircle "
                      v-if="model.hotelLevel.indexOf(item.level) == -1"
                    ></i>
                    <i class="iconfont iconright-1" v-else></i>
                    <div class="dropdown-menu-text">
                      {{ item.name }}
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-row>
          </el-col>

          <!-- 住宿类型 -->
          <el-col
            :span="5"
            style="padding-left:20px;padding-right:20px;"
            class="filter-col"
          >
            <el-row class="filter-title">
              <el-col :span="24">住宿类型</el-col>
            </el-row>
            <el-row class="filter-wrapper">
              <el-dropdown class="filter-dropdown">
                <span class="el-dropdown-link">
                  <span
                    class="dropdown-link-text"
                    v-if="!model.hotelType.length"
                    >不限</span
                  >
                  <span
                    class="dropdown-link-text"
                    v-else-if="JSON.parse(typeicos).length == 1"
                  >
                    {{ options.types[model.hotelType - 1].name }}
                  </span>
                  <span class="dropdown-link-text" v-else>
                    已选{{ JSON.parse(typeicos).length }}项
                  </span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.native="handleHotelType(item.id)"
                    v-for="(item, index) in options.types"
                    :key="index"
                  >
                    <i
                      class="iconfont iconcircle "
                      v-if="typeicos.indexOf(JSON.stringify(item.id)) == -1"
                    ></i>
                    <i class="iconfont iconright-1" v-else></i>

                    <div class="dropdown-menu-text">{{ item.name }}</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-row>
          </el-col>

          <!-- 酒店设施 -->
          <el-col
            :span="5"
            style="padding-left:20px;padding-right:20px;"
            class="filter-col"
          >
            <el-row class="filter-title">
              <el-col :span="24">酒店设施</el-col>
            </el-row>
            <el-row class="filter-wrapper">
              <el-dropdown class="filter-dropdown">
                <span class="el-dropdown-link">
                  <span
                    class="dropdown-link-text"
                    v-if="!model.hotelAsset.length"
                    >不限</span
                  >
                  <span
                    class="dropdown-link-text"
                    v-else-if="JSON.parse(asseticos).length == 1"
                    >{{ options.assets[model.hotelAsset - 1].name }}</span
                  >
                  <span class="dropdown-link-text" v-else
                    >已选{{ JSON.parse(asseticos).length }}项</span
                  >
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    @click.native="handleHotelAsset(item.id)"
                    v-for="(item, index) in options.assets"
                    :key="index"
                  >
                    <i
                      class="iconfont iconcircle "
                      v-if="
                        asseticos.indexOf(JSON.stringify(item.assets)) == -1
                      "
                    ></i>
                    <i class="iconfont iconright-1" v-else></i>
                    <div class="dropdown-menu-text">{{ item.name }}</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-row>
          </el-col>

          <!-- 酒店品牌 -->
          <el-col
            :span="5"
            style="padding-left:20px;padding-right:20px;"
            class="filter-col"
          >
            <el-row class="filter-title">
              <el-col :span="24">酒店品牌</el-col>
            </el-row>
            <el-row class="filter-wrapper">
              <el-dropdown class="filter-dropdown">
                <span class="el-dropdown-link">
                  <span
                    class="dropdown-link-text"
                    v-if="!model.hotelBrand.length"
                    >不限</span
                  >
                  <span
                    class="dropdown-link-text"
                    v-else-if="JSON.parse(brandicos).length == 1"
                    >{{ options.brands[model.hotelBrand - 4].name }}</span
                  >
                  <span class="dropdown-link-text" v-else
                    >已选{{ JSON.parse(brandicos).length }}项</span
                  >
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="project-dropdown">
                  <el-dropdown-item
                    @click.native="handleHotelBrand(item.id)"
                    v-for="(item, index) in options.brands"
                    :key="index"
                  >
                    <i
                      class="iconfont iconcircle"
                      v-if="brandicos.indexOf(JSON.stringify(item.id)) == -1"
                    ></i>
                    <i class="iconfont iconright-1 " v-else></i>
                    <div class="dropdown-menu-text">{{ item.name }}</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-row>
          </el-col>

          <el-col
            :span="4"
            style="padding-left:20px;padding-right:20px;"
            class="filter-col"
          >
            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height:100%;"
            >
              <el-button type="primary" @click="handleRepeal"
                >撤销条件</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </div>

      <!-- 搜索结果列表 -->
      <div class="hotel-list" v-if="total">
        <div v-for="item in hotelList" :key="item.id">
          <el-row
            class="hotel-item"
            style="margin-left: -10px; margin-right: -10px;"
          >
            <el-col :span="8" style="padding-left: 10px; padding-right: 10px;">
              <div class="img-wrapper">
                <nuxt-link :to="`/hotel/${item.id}.html`">
                  <img
                    :src="item.photos"
                    alt="汉庭(广州金山石化店)"
                    width="320"
                    height="210"
                  />
                </nuxt-link>
              </div>
            </el-col>

            <el-col :span="10" style="padding-left: 10px; padding-right: 10px;">
              <h4 class="hotel-cn-name">
                <nuxt-link :to="`/hotel/${item.id}.html`">{{
                  item.name
                }}</nuxt-link>
              </h4>

              <div class="hotel-en-name">
                <span>{{ item.alias }} </span>
                <span title="3星级">
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                </span>
                <span>{{ item.hoteltype.name }}</span>
              </div>

              <el-row
                type="flex"
                style="margin-left: -5px; margin-right: -5px;"
              >
                <el-col
                  :span="10"
                  style="padding-left: 5px; padding-right: 5px;"
                >
                  <el-rate
                    v-if="!item.hotellevel"
                    v-model="item.stars"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分"
                    class="rate-budget"
                  >
                  </el-rate>
                  <el-rate
                    v-else
                    v-model="item.hotellevel.level"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分"
                    class="rate-budget"
                  >
                  </el-rate>
                </el-col>

                <el-col
                  :span="7"
                  style="padding-left: 5px; padding-right: 5px;"
                >
                  <span class="height-light">{{ item.all_remarks }}</span
                  >条评价
                </el-col>
                <el-col
                  :span="7"
                  style="padding-left: 5px; padding-right: 5px;"
                >
                  <span class="height-light">{{ item.common_remarks }}</span
                  >篇游记
                </el-col>
              </el-row>
              <div class="hotel-summary-row"></div>
              <div class="location-row">
                <i class="iconfont iconlocation"></i>
                位于: {{ item.address }}
              </div>
            </el-col>

            <el-col
              class="price-col"
              :span="6"
              style="padding-left: 10px; padding-right: 10px;"
            >
              <el-table
                ref="singleTable"
                :data="item.products"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%"
                class="price-table"
                :show-header="false"
              >
                <el-table-column prop="name" width="110"> </el-table-column>
                <el-table-column width="110" prop="price">
                  <template slot-scope="scope">
                    <span class="height-light larger"
                      >￥{{ scope.row.price }}起
                    </span>
                    <i class="el-icon-arrow-right"></i>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="hotel-list" v-else>
        <div class="no-result">暂无符合条件的酒店</div>
      </div>

      <!-- 分页 -->
      <div class="pagination-box" v-if="total">
        <el-pagination
          prev-text="< 上一页"
          next-text="下一页 >"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleChangePagination"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import hotelInputCom from "@/components/hotel/hotelInputCom";
export default {
  data() {
    return {
      forScenicsList: [],
      allScenicsList: [],
      sliceScenicsList: [],
      arrScenics: [],
      isTrue: false,
      cityName: "",
      isArr: true,
      cityid: Number,
      addressMap: [],
      location: [],
      markers: [],
      map: {},
      infoMap: {},
      sendInfoData: {},
      price: [],
      sendHotelData: {
        hotelInfo: {},
        price: {
          prices: []
        }
      },
      // 滑块初始值
      value: 2000,
      model: {
        // 滑块移动后变化的值
        sliderPrice: 2000,
        // 星级选项
        hotelLevel: [],
        // 类型选项
        hotelType: [],
        // 设施选项
        hotelAsset: [],
        // 品牌选项
        hotelBrand: []
      },

      // 以后将要拼接的url地址
      url: "",

      // 将来这些URL,在监听选择事件变化时,存储到url中
      sliderPriceURL: "",
      hotelURL: {
        hotelLevelURL: "",
        hotelTypeURL: "",
        hotelAssetURL: "",
        hotelBrandURL: ""
      },

      // 酒店搜索
      options: {},

      // 酒店列表
      hotelList: [],

      // 分页的总条数
      total: 0,

      // 酒店参数数据
      hotelData: {
        // 酒店列表获取条数
        _limit: 10,
        // 开始数据（分页）, 一页一般加5
        _start: 0
      }
    };
  },
  components: {
    hotelInputCom
  },

  methods: {
    // 酒店筛选
    hotelSearch() {
      this.$axios({
        url: "/hotels/options"
      }).then(res => {
        // console.log(res.data);

        this.options = res.data.data;
        // console.log(this.options);
      });
    },
    // 获取酒店列表
    getHotelList(id) {
      this.$axios({
        url: "/hotels?" + this.url,
        params: {
          city: 197,
          _limit: this.hotelData._limit,
          _start: this.hotelData._start,
          price_lt: this.sliderPriceURL
        }
      }).then(res => {
        this.hotelList = res.data.data;
        this.total = res.data.total;
      });
    },
    // 拖动滑块显示对应价格的酒店
    sliderChangePrice(pri) {
      // console.log(pri)
      this.model.sliderPrice = pri;

      if (this.value === 0) {
        return;
      }
      this.sliderPriceURL = this.value;
      console.log(this.sliderPriceURL);
      this.getHotel(this.cityid);

      // console.log(this.hotelURL.sliderPriceURL);
    },

    //封装queryString
    // 比如房子星级, 如果没有选中任何星级, 则push一个星级进去, 有的话就要判断,这个星级是否选择过,如果选择过则取消选择, 如果没有选择过,就再push进去
    queryString(arr, data) {
      if (!arr.length) {
        arr.push(data);
      } else {
        arr.indexOf(data) == -1
          ? arr.push(data)
          : arr.splice(arr.indexOf(data), 1);
      }

      return arr;
    },

    // 选择房子星级
    handleHotelLevel(level) {
      this.model.hotelLevel = this.queryString(this.model.hotelLevel, level);

      console.log(this.model.hotelLevel);

      this.hotelURL.hotelLevelURL = this.addStr(
        this.model.hotelLevel,
        "hotellevel_in"
      );
      console.log(this.hotelURL.hotelLevelURL);
      // this.getHotelList();
    },

    // 选择房子类型
    handleHotelType(type) {
      this.model.hotelType = this.queryString(this.model.hotelType, type);

      // console.log(this.model.hotelType);

      this.hotelURL.hotelTypeURL = this.addStr(
        this.model.hotelType,
        "hoteltype_in"
      );
      // console.log(this.hotelURL.hotelTypeURL);
      // this.getHotelList();
    },

    // 选择酒店设施
    handleHotelAsset(asset) {
      this.model.hotelAsset = this.queryString(this.model.hotelAsset, asset);

      this.hotelURL.hotelAssetURL = this.addStr(
        this.model.hotelAsset,
        "hotelasset_in"
      );
    },
    // 选择酒店品牌
    handleHotelBrand(brand) {
      this.model.hotelBrand = this.queryString(this.model.hotelBrand, brand);

      this.hotelURL.hotelBrandURL = this.addStr(
        this.model.hotelBrand,
        "hotelbrand_in"
      );
    },

    addStr(arr, inUrl) {
      let urlStr = "";
      arr.forEach(el => {
        urlStr += "&" + inUrl + "=" + el;
        // console.log(el);
      });
      return urlStr;
    },

    // 撤销条件
    handleRepeal() {
      // 滑块初始值
      (this.value = 2000),
        (this.model = {
          // 滑块移动后变化的值
          sliderPrice: 2000,
          // 星级选项
          hotelLevel: [],
          // 类型选项
          hotelType: [],
          // 设施选项
          hotelAsset: [],
          // 品牌选项
          hotelBrand: []
        });

      (this.hotelURL = {
        sliderPriceURL: "",
        hotelLevelURL: "",
        hotelTypeURL: "",
        hotelAssetURL: "",
        hotelBrandURL: ""
      }),
        this.getHotel();
    },

    // 分页
    handleChangePagination(page) {
      console.log(page);
      let _start;
      if (page > 1) {
        _start = page * 5 - 5;
      }
      this.hotelData._start = _start;
      console.log(this.hotelData._start);

      this.getHotel(this.cityid);
    },

    // 点击携程表单跳转
    handleCurrentChange() {
      window.location.href = "https://hotels.ctrip.com/hotel/694679.html";
    },
    // 搜索城市显示区域
    showScenics() {
      if (this.forScenicsList.length > 15) {
        this.forScenicsList = this.sliceScenicsList;
        this.isTrue = false;
      } else {
        this.forScenicsList = this.allScenicsList;
        this.isTrue = true;
      }
    },

    // 页面一进来自动定位显示区域初始化
    showArrScenics() {
      if (this.forScenicsList.length > 15) {
        this.forScenicsList = this.arrScenicsList;
        this.isTrue = false;
      } else {
        this.forScenicsList = this.arrScenics;
        this.isTrue = true;
      }
      //
    },

    // 城市搜索子传父组件数据
    sendScenics(searchData) {
      // console.log(searchData)  // id
      this.isArr = false;
      this.allScenicsList = searchData.scenics;
      this.sliceScenicsList = searchData.scenics.slice(0, 15);
      this.forScenicsList = this.sliceScenicsList;
      this.cityName = searchData.value;
      this.cityid = searchData.id;
      this.getHotel(searchData.id);
    },

    // 自动定位ip获取城市名
    getCityName() {
      return this.$axios({
        url: "https://restapi.amap.com/v3/ip",
        params: {
          key: "03eb20257c8f4605b93a9ff54f2654e4"
        }
      }).then(res => {
        if (res.status == 200) {
          this.$message.success("您当前定位的城市是:" + res.data.city);
        }
        return (this.cityName = res.data.city);
      });
    },

    // 自动获取定位获取区域
    getAddress(cityName) {
      return this.$axios({
        url: "/cities",
        params: {
          name: cityName
        }
      }).then(res => {
        if (res.data.data[0].scenics) {
          this.arrScenics = res.data.data[0].scenics;
          this.arrScenicsList = res.data.data[0].scenics.slice(0, 15);
          this.forScenicsList = res.data.data[0].scenics.slice(0, 15);
        }
        return (this.cityid = res.data.data[0].id);
      });
    },

    // 搜索获取酒店(location)
    getHotel(id) {
      return this.$axios({
        url: "/hotels?" + this.url,
        params: {
          city: id,
          _limit: this.hotelData._limit,
          _start: this.hotelData._start,
          price_lt: this.sliderPriceURL
        }
      }).then(res => {
        this.hotelList = res.data.data;
        this.total = res.data.total;
        var priceArr = [];
        for (let i = 0; i < res.data.data.length; i++) {
          priceArr.push(res.data.data[i].price);
        }
        this.price = priceArr;
        this.addressMap = res.data.data;
        var firstIp = [];
        firstIp.push(this.addressMap[0].location.longitude);
        firstIp.push(this.addressMap[0].location.latitude);
        this.getMap(firstIp);
      });
    },

    // 获取地图
    getMap(firstIp) {
      // 地图
      window.onLoad = function() {
        this.map = new AMap.Map("container", {
          zoom: 12,
          center: firstIp
        });
        this.setMarker();
      }.bind(this);
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=87738e20cab75bb67f3887090432d162&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },

    // 设置点标记
    setMarker() {
      // 将infoMap\markers\map存在data中需要使用到用this.即可
      this.infoMap = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
      this.markers = this.addressMap.map(val => {
        var poin = [];
        poin.push(val.location.longitude);
        poin.push(val.location.latitude);
        var marker = new AMap.Marker({
          title: val.name,
          position: poin
        });
        marker.content = "<p>" + val.name + "</p>";
        marker.on("mouseover", this.infoOpen);
        // mouseleave不触发
        marker.on("mouseout", this.infoClose);
        return marker;
      });
      this.map.add(this.markers);
    },

    // 移入点标记触发提示框
    infoOpen(e) {
      this.infoMap.setContent(e.target.content);
      this.infoMap.open(this.map, e.target.getPosition());
    },

    // 移除点标记隐藏提示框
    infoClose(e) {
      this.infoMap.close(this.map, e.target.getPosition());
    },

    sendData(val) {
      this.sendInfoData = val;
      this.sendHotelData.hotelInfo = this.sendInfoData;
      this.sendHotelData.price = this.price;
      var s = 0;
      this.sendHotelData.price.forEach(function(val, idx, arr) {
        s += val;
      }, 0);
      this.sliderPriceURL = s;
      console.log(this.sendHotelData.hotelInfo);
      this.getHotel(this.cityid);
      console.log(this.sendHotelData.price);
      // this.$emit("sendHotelData", this.sendHotelData);
    }
  },

  mounted() {
    this.getCityName().then(val => {
      this.getAddress(val).then(res => {
        this.getHotel(res);
      });
    });
  },
  computed: {
    // 计算价格区间,动态渲染
    price_Filter() {
      return this.model.sliderPrice;
    },

    //
    typeicos() {
      return JSON.stringify(this.model.hotelType || "");
    },

    asseticos() {
      return JSON.stringify(this.model.hotelAsset || "");
    },

    brandicos() {
      return JSON.stringify(this.model.hotelBrand || "");
    }
  },
  created() {
    this.hotelSearch();
    // this.getHotel(this.cityid);
  },
  watch: {
    // 监听滑块的值,并将值存入url中备用
    value() {
      // console.log(this.hotelURL.sliderPriceURL);
    },
    hotelURL: {
      handler() {
        let url = Object.values(this.hotelURL)
          .toString()
          .replace(/,/g, "");

        this.url = url;
        console.log(this.url);
        this.getHotel(this.cityid);
      },
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  color: #666;
  margin-top: 15px;
  .address {
    .allAddress {
      margin-bottom: 20px;
    }
    > .el-col {
      padding-right: 5px;
      &:last-child {
        padding-right: 0;
        padding-left: 5px;
      }
    }
  }

  #container {
    width: 420px;
    height: 260px;
  }

  .address {
    font-size: 14px;
    .addressSpan {
      > span {
        margin-right: 14px;
      }
      .showI {
        transform: rotate(270deg) !important;
        color: #f90;
        margin-right: 5px;
      }
      .el-icon-d-arrow-right {
        transform: rotate(90deg);
        color: #f90;
        margin-right: 5px;
      }
    }

    .price {
      position: relative;
      .priceQuestion {
        position: absolute;
        top: -4px;
        left: 33px;
        width: 14px;
        line-height: 14px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        cursor: default;
      }

      .el-tooltip {
        margin-right: 30px;
        > i {
          color: #f90;
        }
      }
    }
  }
}
.container {
  margin-top: 20px;

  .list-filter {
    border: 1px solid #ddd;
    padding: 5px 20px;
    color: #666;

    .filter-col {
      border-right: 1px solid #ddd;
      padding: 5px 0;

      .filter-title {
        font-size: 14px;

        .ta-r {
          text-align: right;
        }
      }

      .filter-wrapper {
        height: 38px;
        display: flex;
        align-items: center;
      }
    }
  }

  .hotel-item {
    padding: 25px 0;
    border-bottom: 1px solid #eee;

    .el-col-8 {
      width: 33.33333%;

      .img-wrapper {
        width: 420px;
      }
    }

    .el-col-10 {
      width: 41.66667%;

      .hotel-cn-name {
        font-weight: 400;
        font-size: x-large;
      }

      .hotel-en-name {
        color: #999;

        .iconhuangguan {
          color: #f90;
        }
      }

      .rate-budget {
        display: inline-block;
      }

      .height-light {
        color: #f90;
      }

      .hotel-summary-row,
      .location-row {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .no-result {
    text-align: center;
    height: 300px;
    margin-top: 20px;
  }
}

.el-row:last-child {
  border: none;
}

.ta-r:last-child {
  border: none;
}

.filter-dropdown {
  position: relative;
  width: 100%;
}

.el-dropdown-link {
  display: flex;
  flex: 1;
  width: 100%;
  cursor: pointer;
}

.dropdown-link-text {
  flex: 1;
  font-size: 13px;
}

.dropdown-menu-text {
  display: inline-block;
  min-width: 100px;
  margin-left: 10px;
}

.project-dropdown {
  //设置高度才能显示出滚动条 !important
  height: 300px;
  overflow: auto;
}
.project-dropdown::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}
.project-dropdown::-webkit-scrollbar-track {
  //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

.height-light {
  color: #f90;
}

.larger {
  font-size: larger;
}

.el-table .cell {
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
}

.pagination-box {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0 40px;
}
</style>
